<template>
	<div class="qujian-container">
		<div class="qujian-header">
			<div class="qujian-header-guanyu">
				<el-dropdown trigger="click">
				      <span class="el-dropdown-link">
				       <i class="el-icon-more"></i>
				      </span>
				      <el-dropdown-menu slot="dropdown">
				        <el-dropdown-item >菜鸟驿站服务设置</el-dropdown-item>
				        <el-dropdown-item >添加亲友</el-dropdown-item>
				        <el-dropdown-item >使用帮助</el-dropdown-item>
				        <el-dropdown-item >返回旧版本</el-dropdown-item>
				        <el-dropdown-item >我要反馈</el-dropdown-item>
				      </el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
		<div class="qujian-body">
			<div class="qujian-body-none"></div>
			<div class="qujian-body-title">
				<span>暂无待取包裹</span>
			</div>
			<div class="qujian-body-chaxun">
				<div class="qujian-body-chaxun-toppic">
	                <img src="@/assets/qujian/qujian1.png" />
				</div>
				<div class="qujian-body-chaxun-underpic">
					<div class="qujian-box">
						<img id="imgbase">
						<span>{{uname}}</span>
					</div>
					<div class="qujian-box" v-for="item in friends">
						<img :src="item.imgbase">
						<span>{{item.uname}}</span>
					</div>
					<router-link class="qujian-box" to="/qujian/qujian-add">
					    <img src="@/assets/qujian/add.png"/>
						<span class="qinyou">添加亲友</span>
					</router-link>
				</div>
			</div>
			<div class="qujian-body-title2">
				<p>我的站点</p>
			</div>
			<div class="qujian-body-zhandian" v-for="item in address" >
				<p>{{item.name}}</p> 
				<p>{{item.address}}</p>
			</div>

			<div class="qujian-body-bottom"></div>
		</div>
		
	</div>
</template>

<script>
	export default {
		name: 'qujian',
		data() {
			return {
				uname: '',
				imgbase: '',
				address: [],
				friends: []
			}
		},
		mounted() {
			let _this = this;
			_this.uname = window.sessionStorage.getItem('uname');
			let imgbase = window.sessionStorage.getItem('imgbase');
			document.getElementById('imgbase').setAttribute('src', imgbase);
		},
		created() {
		    let id = window.sessionStorage.getItem('phonenum');
		    this.$http.get('/api/address/' + id)
		    .then(({data}) => {
		        this.address = data.data;
		    });

			this.$http.get('/api/getfriends/' + id)
			.then(({data}) => {
				this.friends = data.data;
				sessionStorage.setItem('friends', JSON.stringify(this.friends))
			})
		}
	}
</script>

<style lang="scss" scoped>
	.qujian-container{
		background-color:#EBF3FF;
		height: 100vmax;
	}
	.qujian-header{
		height: 50px;
		width: 100%;
		position: fixed;
		top: 0;
	}
	.qujian-header-guanyu{
		font-size: 50px;
	    float: right;
		margin-right: 20px;
	}
	.qujian-body-none{
		height: 50px;
		width: 100%;
	}
	.el-icon-more {
		font-size: 30px;
	}
	.qujian-body-title{
		height: 100px;
		width: 100%;
		font-size: 40px;
		span{
			line-height: 100px;
			margin-left: 40px;
			font-weight: 600;
		}
	}
	.qujian-body-chaxun{
		border-radius: 40px;
		width: 95%;
		height: 650px;
		overflow: hidden;
		background-color: white;
		margin:2.5% auto;
	}
	.qujian-body-chaxun-toppic img{
		width: 101%;
	}
	.qujian-body-chaxun-underpic{
		display: flex;
		justify-content: center;
		.qujian-box {
			width: 80px;
			height: 120px;
			margin: 20px;
			img{
				width: 100%;
				display: block;
				border-radius: 50%;
			}
			span {
				display: flex;
				justify-content: center;
				font-size: 15px;
				padding-top: 10px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.qinyou {
				color: #2f8cff;
			}
		}
	}
	.qujian-body-title2{
		height: 60px;
		line-height: 70px;
		font-size: 30px;
		margin: 10px;
		p{
		    margin-left: 40px;
			font-weight: 600;
		 }
		}
	.qujian-body-zhandian{
	  border-radius: 30px;
	  width: 95%;
	  height: 130px;
	  margin-left: 2.5%;
	  background-color:white;
	  margin: 20px;
	  p:nth-child(1){
	  	font-size: 30px;
	  	padding:15px 20px;
	  }
	  p:nth-child(2){
	  	font-size: 25px;
	  	padding:0 20px;
	  }
	  } 
	.el-dropdown-link {
	    cursor: pointer;
	    
	  }
	.el-icon-arrow-down {
	    font-size: 12px;
	  }
	.demonstration {
	    display: block;
	    color: #8492a6;
	    font-size: 14px;
		font-weight:100;
	    margin-bottom: 20px;
	  }
	.el-dropdown-menu{
		  color:lightgray;
	  }
	.qujian-body-bottom{
		  width: 100%;
		  height: 150px;
		  
	  }
</style>
